<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客列表页</title>

    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="blog_list.css">
</head>
<body>
<!--导航栏-->
    <div class="nav">
        <img src="img/whsxy.jpg" alt="">
        <div class="title">我的博客系统</div>
<!--只是一个空白，用来把后面的链接挤过去-->
        <div class="space"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="">注销</a>
    </div>
<!--页面主体部分-->
<div class="container">
    <!--左侧信息    -->
    <div class="container-left">
<!--        这个div表示整个用户信息的长度-->
        <div class="card">
            <img src="img/wzy.jpg"alt="">
<!--        -->
            <h3>王正阳</h3>
            <a href="https://gitee.com/a-yang-xue-c/test-warehouse">gitee地址</a>
<!--       -->
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                    <span>2</span>
                    <span>1</span>
            </div>
        </div>
    </div>
    <!--右侧信息    -->
    <div class="container-right">
<!--        这个div表示第一个博客-->
        <div class="blog">
            <!--博客标题-->
            <div class="tile">我的第一篇博客</div>
<!--                博客发布时间-->
            <div class="date">2023-05-11 20:00:00</div>
<!--            博客摘要-->
            <div class="desc">
<!--                使用lorem生成一段随机的字符串-->
                从今天起，我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.

            </div>
<!--            HTML中不能直接写大于号，大于号要写成&gt，小于号写出&lt-->
            <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt;</a>
        </div>
        <div class="blog">
            <!--博客标题-->
            <div class="tile">我的第二篇博客</div>
            <!--                博客发布时间-->
            <div class="date">2023-05-11 20:00:00</div>
            <!--            博客摘要-->
            <div class="desc">
                <!--                使用lorem生成一段随机的字符串-->
                从今天起，我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.

            </div>
            <!--            HTML中不能直接写大于号，大于号要写成&gt，小于号写出&lt-->
            <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt;</a>
        </div>
        <div class="blog">
            <!--博客标题-->
            <div class="tile">我的第三篇博客</div>
            <!--                博客发布时间-->
            <div class="date">2023-05-11 20:00:00</div>
            <!--            博客摘要-->
            <div class="desc">
                <!--                使用lorem生成一段随机的字符串-->
                从今天起，我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.

            </div>
            <!--            HTML中不能直接写大于号，大于号要写成&gt，小于号写出&lt-->
            <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt;</a>
        </div>
    </div>
</div>
</body>
</html>